<template>
    <view class="warp">
        <view class="userInfo">
            <view class="set">
                <u-icon class="icon_set" name="setting" color="#fff" size="24"></u-icon>
                <view class="userInfo_contner">
                    <image :src="avatar" mode="scaleToFill" />
                    <text>{{ name }}</text>
                </view>
            </view>
        </view>
        <view class="order_form">
            <view class="order_warp" @click="status0">
                <u-icon name="order" color="#fdd20a" size="32"></u-icon>
                <view>全部订单</view>
            </view>
            <view class="order_warp" @click="status1">
                <u-icon name="red-packet-fill" color="#fdd20a" size="32"></u-icon>
                <view>待付款</view>
            </view>
            <view class="order_warp" @click="status2">
                <u-icon name="car" color="#fdd20a" size="32"></u-icon>
                <view>待发货</view>
            </view>
            <view class="order_warp" @click="status3">
                <u-icon name="coupon-fill" color="#fdd20a" size="32"></u-icon>
                <view>待收货</view>
            </view>
            <view class="order_warp" @click="status4">
                <u-icon name="rmb-circle" color="#fdd20a" size="32"></u-icon>
                <view>已完成</view>
            </view>
        </view>
        <view class="gather">
            <view class="gather_class">
                <u-icon name="star-fill" color="#888888" size="24"></u-icon>
                <view class="gather_text">
                    <text>我的收藏</text>
                    <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
                </view>
            </view>

            <view class="gather_class">
                <u-icon name="map-fill" color="#888888" size="24"></u-icon>
                <view class="gather_text">
                    <text>地址管理</text>
                    <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
                </view>
            </view>
            <view class="gather_class">
                <u-icon name="heart-fill" color="#888888" size="24"></u-icon>
                <view class="gather_text">
                    <text>关于我们</text>
                    <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
                </view>
            </view>
            <view class="gather_class">
                <u-icon name="phone-fill" color="#888888" size="24"></u-icon>
                <view class="gather_text">
                    <text>联系我们</text>
                    <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
                </view>
            </view>
            <view class="gather_class" @click="get_set">
                <u-icon name="setting-fill" color="#888888" size="24"></u-icon>
                <view class="gather_text">
                    <text>设置</text>
                    <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    mounted() {

    },
    methods: {
        status0() {
            uni.navigateTo({ url: '/pages/order/order?status=' + 0 })
        },
        status1() {
            uni.navigateTo({ url: '/pages/order/order?status=' + 1 })
        },
        status2() {
            uni.navigateTo({ url: '/pages/order/order?status=' + 2 })
        },
        status3() {
            uni.navigateTo({ url: '/pages/order/order?status=' + 3 })
        },
        status4() {
            uni.navigateTo({ url: '/pages/order/order?status=' + 4 })
        },
        get_set() {
            uni.navigateTo({ url: '/pages/my/set' })
        }

    },
    computed: {
        name() {
            let uid = this.$store.state.uid;
            let username = this.$store.state.username;

            let nickname = this.$store.state.userInfo.username;

            if (!uid) {
                return '请登录'
            }
            return nickname || username
        },
        avatar() {
            let uid = this.$store.state.uid;
            let img = this.$store.state.userInfo.avatar;
            if (!uid) {
                //没登录 返回灰色
                return '/static/images/my/001.png'
            }
            return img || '/static/images/common/logo.png'

        }

    },
}
</script>

<style lang="scss" scoped>
.warp {
    width: 100%;
    position: relative;

    .userInfo {
        width: 100%;
        height: 200px;
        background-image: url('../../static/images/my/my_bj.png');
        background-size: cover;

        .set {
            padding: 0 10px;

            .icon_set {
                width: 100%;
                display: flex;
                justify-content: right;
                padding-top: 30px;
            }

            .userInfo_contner {
                width: 100%;
                margin-top: 20px;

                image {
                    width: 60px;
                    height: 60px;
                    vertical-align: middle;
                }

                text {
                    font-size: 16px;
                    margin-left: 10px;
                    color: #fff;
                }
            }

        }
    }

    .order_form {
        width: 95%;
        height: 110px;
        background-color: #fff;
        margin: 0 auto;
        border-radius: 15px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 160px;
        left: 10px;
        overflow: hidden;

        .order_warp {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-content: stretch;
            align-items: center;

            view {
                margin-top: 10px;
            }
        }
    }

    .gather {
        width: 95%;
        margin: 90px auto;
        background-color: #fff;
        border-radius: 10px;

        .gather_class {
            width: 90%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;


            .gather_text {
                width: 80%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid rgb(237, 233, 233);

            }
        }
    }
}
</style>